<template>
    <div class="app-container page-wood-supplier">
        <FilterForm
            :data="filterData"
            @search="filterSearch"
            ref="FilterForm"
            labelWidth="90px"
        />

        <el-row :gutter="10" class="opr-btn-group mb8">
            <el-col :span="1.5">
                <el-button
                    type="primary"
                    plain
                    icon="el-icon-edit"
                    size="mini"
                    :disabled="multiple"
                    @click="assigningSalesman"
                    v-hasPermi="[
                        'WoodSupplier:WoodSupplierMessage:editSupplierAllotEmployee',
                    ]"
                    >分配</el-button
                >
            </el-col>
            <el-col :span="1.5">
                <el-button
                    type="primary"
                    plain
                    icon="el-icon-plus"
                    size="mini"
                    @click="handleAdd"
                    v-hasPermi="['WoodSupplier:WoodSupplierMessage:add']"
                    >新增
                </el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button
                    type="success"
                    plain
                    icon="el-icon-edit"
                    size="mini"
                    :disabled="single"
                    @click="handleUpdate"
                    v-hasPermi="['WoodSupplier:WoodSupplierMessage:edit']"
                    >修改
                </el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button
                    type="danger"
                    plain
                    icon="el-icon-delete"
                    size="mini"
                    :disabled="multiple"
                    @click="handleDelete"
                    v-hasPermi="['WoodSupplier:WoodSupplierMessage:remove']"
                    >删除
                </el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button
                    type="warning"
                    plain
                    icon="el-icon-download"
                    size="mini"
                    :loading="exportLoading"
                    @click="handleExport"
                    v-hasPermi="['WoodSupplier:WoodSupplierMessage:export']"
                    >导出
                </el-button>
            </el-col>
        </el-row>

        <Table
            @select="handleSelectionChange"
            :api="$Api.supplier.info.list"
            :selection="true"
            height="65vh"
            ref="Table"
        >
            <el-table-column
                label="供应商编号"
                align="center"
                prop="supplierId"
            />
            <el-table-column
                label="供应商名称"
                align="center"
                prop="supplierName"
                width="120"
            />
            <el-table-column
                label="公司名称"
                align="center"
                prop="corporateName"
                width="120"
            />
            <el-table-column
                label="联系人"
                align="center"
                prop="customerLinkman"
            />
            <el-table-column
                label="联系电话"
                align="center"
                prop="corporatePhone"
            />
            <el-table-column
                label="微信号"
                align="center"
                prop="supplierWechat"
            />
            <el-table-column
                label="供应商类别"
                align="center"
                prop="supplierTypeName"
            />
            <el-table-column
                label="应付余额"
                align="center"
                prop="accountsPayable"
            />
            <el-table-column
                label="采购员"
                align="center"
                prop="businessPersonnel"
            />
            <el-table-column
                label="录入时间"
                align="center"
                prop="inputTime"
                width="120"
            >
                <template slot-scope="scope">
                    <span>{{
                        parseTime(scope.row.inputTime, "{y}-{m}-{d}")
                    }}</span>
                </template>
            </el-table-column>
            <el-table-column label="备注" align="center" prop="remark" />
            <el-table-column label="状态" align="center" key="status">
                <template slot-scope="scope">
                    <el-switch
                        v-model="scope.row.status"
                        active-value="0"
                        inactive-value="1"
                        @change="handleStatusChange(scope.row)"
                    >
                    </el-switch>
                </template>
            </el-table-column>
            <el-table-column
                label="操作"
                align="center"
                class-name="small-padding fixed-width"
            >
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-edit"
                        @click.native.stop="handleUpdate(scope.row)"
                        v-hasPermi="['WoodSupplier:WoodSupplierMessage:edit']"
                        >修改
                    </el-button>
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-delete"
                        @click.native.stop="handleDelete(scope.row)"
                        v-hasPermi="['WoodSupplier:WoodSupplierMessage:remove']"
                        >删除
                    </el-button>
                </template>
            </el-table-column>
        </Table>

        <!-- 添加或修改木业供应商信息对话框 -->
        <el-dialog
            :title="title"
            :visible.sync="open"
            width="60%"
            append-to-body
            :close-on-click-modal="false"
        >
        <el-form ref="form" :model="form" :rules="rules" label-width="95px">
        <el-row :gutter="10">
            <el-col :span="10">
                <el-form-item label="供应商名称" prop="supplierName">
                    <el-input
                        v-model="form.supplierName"
                        placeholder="请输入供应商名称"
                    />
                </el-form-item>
            </el-col>
             <el-col :span="10">
                 <el-form-item label="公司名称" prop="corporateName">
                    <el-input
                        v-model="form.corporateName"
                        placeholder="请输入公司名称"
                    />
                </el-form-item>
            </el-col>
             <el-col :span="10">
                 <el-form-item label="供应商类别" prop="supplierType">
                    <el-select
                        v-model="form.supplierType"
                        clearable
                        placeholder="请选择供应商类别"
                    >
                        <el-option
                            v-for="item in supplierCategoryList"
                            :key="item.basicsId"
                            :label="item.basicsName"
                            :value="item.basicsId"
                        ></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
             <el-col :span="10">
                 <el-form-item label="采购员" prop="businessPersonnel">
                    <el-select
                        v-model="form.businessPersonnel"
                        placeholder="请选择采购员"
                        clearable
                        size="small"
                    >
                        <el-option
                            v-for="item in businessList"
                            :key="item.userId"
                            :label="item.nickName"
                            :value="item.nickName"
                        ></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
             <el-col :span="10">
                 <el-form-item label="联系人" prop="customerLinkman">
                    <el-input
                        v-model="form.customerLinkman"
                        placeholder="请输入联系人"
                    />
                </el-form-item>
            </el-col>
             <el-col :span="10">
                 <el-form-item label="联系电话" prop="corporatePhone">
                    <el-input
                        v-model="form.corporatePhone"
                        placeholder="请输入联系电话"
                    />
                </el-form-item>
            </el-col>
             <el-col :span="10">
                 <el-form-item label="微信号" prop="supplierWechat">
                    <el-input
                        v-model="form.supplierWechat"
                        placeholder="请输入微信号"
                    />
                </el-form-item>
            </el-col>
             <el-col :span="10">
                 <el-form-item label="状态">
                    <el-radio-group v-model="form.status">
                        <el-radio
                            v-for="dict in statusOptions"
                            :key="dict.dictValue"
                            :label="dict.dictValue"
                            >{{ dict.dictLabel }}</el-radio
                        >
                    </el-radio-group>
                </el-form-item>
            </el-col>
            <el-col :span="20">
                <el-form-item label="备注" prop="remark">
                    <el-input
                        v-model="form.remark"
                        type="textarea"
                        placeholder="请输入内容"
                    />
                </el-form-item>
            </el-col>
        </el-row>
        </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>

        <!-- 分配采购员 -->
        <el-dialog
            :title="title"
            :visible.sync="openOne"
            width="600px"
            append-to-body
        >
            <el-form
                ref="formSell"
                :model="formSell"
                :rules="rules"
                label-width="80px"
            >
                <el-form-item label="采购员" prop="businessPersonnel">
                    <el-select
                        v-model="formSell.businessPersonnel"
                        placeholder="请选择采购员"
                        clearable
                        size="small"
                    >
                        <el-option
                            v-for="item in businessList"
                            :key="item.userId"
                            :label="item.nickName"
                            :value="item.nickName"
                        ></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitFormBusiness"
                    >确 定</el-button
                >
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>

export default {
    name: "WoodSupplierMessage",
    data() {
        return {
            // 遮罩层
            loading: true,
            // 导出遮罩层
            exportLoading: false,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 状态数据字典
            statusOptions: [],
            // 总条数
            total: 0,
            //供应商类别数据
            supplierCategoryList: [],
            // 分配员列表
            businessList: [],
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            openOne: false,
            // 录入时间时间范围
            daterangeInputTime: [],
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                supplierName: null,
                corporateName: null,
                customerLinkman: null,
                corporatePhone: null,
                supplierWechat: null,
                supplierTypeName: null,
                supplierType: null,
                accountsPayable: null,
                businessPersonnel: null,
                inputTime: null,
                status: null,
            },
            // 表单参数
            form: {},
            formSell: {},
            // 表单校验
            rules: {
                supplierName: [
                    {
                        required: true,
                        message: "供应商名称不能为空",
                        trigger: "blur",
                    },
                ],
            },
            filterData: [
                {
                    label: "名称",
                    name: "supplierName",
                    placeholder: "名称/联系人/电话",
                },
                {
                    label: "供应商类别",
                    name: "supplierType",
                    type: "select",
                    select: "supplier",
                },
                {
                    label: "日期范围",
                    name: "daterangeInputTime",
                    type: "period_date",
                    st: "beginInputTime",
                    end: "endInputTime",
                    scale: 2,
                },
                {
                    label: "状态",
                    name: "status",
                    type: "select",
                    select: {
                        option: [],
                        selectValue: "dictValue",
                        selectLabel: "dictLabel",
                    },
                },
            ],
        };
    },
    created() {
        this.getListSupplierCategory();
        this.getBusinessList();
        this.getDicts("sys_normal_disable").then((res) => {
            let { data } = res;
            this.statusOptions = data;
            this.filterData.forEach((v) => {
                if (v.name === "status") {
                    v.select.option = data;
                }
            });
        });
    },
    methods: {
        filterSearch(params) {
            this.$refs.Table.getData(params);
        },

        // 供应商类表
        getListSupplierCategory() {
            this.$Api.supplier.sort.list().then((res) => {
                let { rows } = res;
                this.supplierCategoryList = rows;
            });
        },
        // 查询分配员列表
        getBusinessList() {
            this.$Api.user.list().then( (res) =>{
                let { rows } = res;
                this.businessList = rows;
            })

        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.openOne = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.form = {
                supplierId: null,
                supplierName: null,
                corporateName: null,
                customerLinkman: null,
                corporatePhone: null,
                supplierWechat: null,
                supplierTypeName: null,
                accountsPayable: null,
                businessPersonnel: null,
                inputTime: null,
                status: "0",
                remark: null,
            };
            this.formSell = {
                businessPersonnel: null,
                customerCodes: null,
            };
            this.resetForm("form");
            this.resetForm("formSell");
        },

        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map((item) => item.supplierId);
            this.single = selection.length !== 1;
            this.multiple = !selection.length;
        },
        // 分配业务员
        assigningSalesman() {
            this.openOne = true;
            this.title = "分配销售员";
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.reset();
            this.open = true;
            this.title = "添加供应商信息";
        },
        // 用户状态修改
        handleStatusChange(row) {
            let text = row.status === "0" ? "启用" : "停用";
            this.$confirm(
                '确认要"' + text + '""' + row.supplierName + '"用户吗?',
                "警告",
                {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                }
            )
            .then( ()=>{
                let state = {
                   supplierId: row.supplierId,
                   status: row.status 
                }
                this.$Api.supplier.info.edit(state)
                .then( (res)=>{
                    let { code } = res;
                    if( code == 200 ) {
                        this.filterSearch();
                        this.msgSuccess(text + "成功");
                    }
                })
            }).catch( ()=>{
                row.status = row.status === "0" ? "1" : "0";
            })    
                
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            this.reset();
            const supplierId = row.supplierId || this.ids;
            this.$Api.supplier.info.detail(supplierId).then((res) => {
                let { data, code } = res;
                if( code == 200) {
                this.form = data;
                this.open = true;
                this.title = "修改供应商信息";
                }
            });
        },
        /** 提交按钮 */
        submitForm() {
            let { supplierId } = this.form;
            let { form } = this;
            this.$refs["form"].validate((valid) => {
                if (valid) {
                    if (supplierId != null) {
                        this.$Api.supplier.info.update(form).then(
                            (res) => {
                                let { code } = res;
                                if( code == 200 ){
                                    this.msgSuccess("修改成功");
                                    this.open = false;
                                    this.filterSearch();
                                }
                            }
                        );
                    } else {
                        this.$Api.supplier.info.add(form).then((res) => {
                           let { code } = res;
                           if( code == 200 ) {
                                this.msgSuccess("新增成功");
                                this.open = false;
                                this.filterSearch();
                           }
                        });
                    }
                }
            });
        },
        submitFormBusiness(row) {
            let { formSell } = this;
            this.$refs["formSell"].validate((valid) => {
                if (valid) {
                    const customerCodes = row.supplierId || this.ids;
                    this.formSell.customerCodes = customerCodes;
                    this.$Api.supplier.info.allot(formSell).then((res) => {
                        let { code } = res;
                        if( code == 200) {
                            this.msgSuccess("分配成功");
                            this.openOne = false;
                            // this.filterSearch();
                        }
                    }); 
                }
            });
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            const supplierIds = row.supplierId || this.ids;
            this.$confirm(
                '是否确认删除木业供应商信息编号为"' +
                    supplierIds +
                    '"的数据项?',
                "警告",
                {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                }
            )
            .then( ()=>{
                this.$Api.supplier.info.del(supplierIds)
                .then( (res)=>{
                    let { code } = res;
                    if( code == 200 ) {
                        this.filterSearch();
                        this.msgSuccess("删除成功");
                    }
                })
            }).catch( ()=>{});
            
            
        },
        /** 导出按钮操作 */
        handleExport() {
            const queryParams = this.queryParams;
            this.$confirm("是否确认导出所有供应商信息数据项?", "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
            .then( ()=>{
                this.exportLoading = true;
                this.$Api.supplier.info.export(queryParams)
                .then( (res)=>{
                    let { code, msg} = res;
                    if( code == 200 ) {
                        this.download(msg);
                        this.exportLoading = false;
                    }
                })
            }).catch( ()=>{});
            
        },
    },
};
</script>
<style lang="scss" scoped>

</style>
